<template>
  <!-- 隔离人员汇总 -->
  <view class="sample">
    <view v-if="info && !showEmpty" class="list">
      <uni-table emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th width="20" align="left">姓名</uni-th>
          <uni-th width="20" align="left">性别</uni-th>
          <uni-th width="20" align="left">手机号</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="(item, index) in info" :key="index">
          <uni-td>{{ item.username }}</uni-td>
            <uni-td>{{ item.gender }}</uni-td>
              <uni-td>{{ item.phone }}</uni-td>
        </uni-tr>
      </uni-table>
      <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
  import VEmpty from '@/components/v-empty/index.vue';
  import Api from '@/api/main';
  export default {
    components: {
      VEmpty
    },
    data() {
      return {
        showEmpty: false,
        date: '',
        info: [
          // {
          //   username: '张三',
          //   gender: '男',
          //   phone: '12312'
          // }
        ]
      };
    },
    methods: {
      async getData() {
        uni.showLoading({
          title: '加载中...'
        });
        const res = await this.$http.post(Api.getSampleDetailByDate);
        this.info = res || [];
        console.log('info', this.info);
        this.showEmpty = !res;
        uni.hideLoading();
      }
    },
    onLoad({ date = '' } = {}) {
      this.date = date
      uni.setNavigationBarTitle({
        title: `样本详情${date ? '-' + date : ''}`
      });
    },
    created() {
      this.getData();
    }
  };
</script>
<style lang="scss">
  .sample {
    width: 100%;
    padding: 20rpx 40rpx;

    .chart {
      width: calc(100% - 100rpx);
      margin: 0 auto;
    }

    .collect {
      margin-top: 40rpx;
      padding: 40rpx 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 2;

      .hd {
        text-align: center;
      }

      .grey {
        color: $uni-sub-text-color;
      }
    }

    .link {
      color: $uni-color-primary;
      text-decoration: underline;
    }
  }
</style>